import React from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { pickApple, eatApple } from '@/actions';

import AppleEmpty from '@/components/empty';
import AppleList from '@/components/list';
import Status from '@/components/status';

import './scss/index';

class Apple extends React.Component {
  static propTypes = {
    // dispatch: PropTypes.func,
    appleActions: PropTypes.object,
    apples: PropTypes.array.isRequired,
  }

  static defaultProps = {
    // dispatch: () => {},
    appleActions: {},
    apples: [],
  }

  handlePickApple = () => {
    // this.props.dispatch(pickApple());
    this.props.appleActions.pickApple();
  }

  handleEatApple = (id) => {
    const index = this.props.apples.findIndex((apple) => {
      return apple.id === id;
    });
    // this.props.dispatch(eatApple(index));
    this.props.appleActions.eatApple(index);
  }

  render() {
    // console.log(this.props.appleActions);
    const { apples } = this.props;

    // 获取当前篮子苹果的状态
    const appleStatus = {
      appleNow: {
        count: 0,
        weight: 0,
      },
      appleEaten: {
        count: 0,
        weight: 0,
      },
    };
    apples.map((apple) => {
      const selector = apple.isEaten ? 'appleEaten' : 'appleNow';
      appleStatus[selector].count += 1;
      appleStatus[selector].weight += apple.weight;
      return appleStatus[selector];
    });

    let appleListContentHtml = '';
    if (apples.length === 0) {
      appleListContentHtml = <AppleEmpty text="篮子空空如也~" />;
    } else {
      appleListContentHtml = apples.map((apple) => {
        if (apple.isEaten) {
          return false;
        }
        return (
          <AppleList
            key={apple.id}
            apple={apple}
            onHandleClick={(id) => { this.handleEatApple(id); }}
          />
        );
      });
    }

    return (
      <div className="apple">
        <div className="apple__title"><h1>苹果篮子</h1></div>
        <div className="apple__status">
          <Status title="当前" count={appleStatus.appleNow.count} weight={appleStatus.appleNow.weight} />
          <Status title="已吃掉" count={appleStatus.appleEaten.count} weight={appleStatus.appleEaten.weight} />
        </div>
        <div className="apple__content">
          <div className="apple__list">
            { appleListContentHtml }
          </div>
          <div className="apple__actions__area">
            <button
              className="button button__primary"
              onClick={this.handlePickApple}
            >
              摘苹果
            </button>
          </div>
        </div>
      </div>
    );
  }
}

// 将 state 绑定到 props
const mapStateToProps = (state) => {
  // console.info('redux state =>> ', state);
  return {
    apples: state.apples,
  };
};

// 将 action 的方法绑定到 props
const mapDispatchToProps = (dispatch) => {
  // console.log('redux dispatch =>> ', dispatch);
  // {
  //   pickApple: func, 
  //   eatApple: func,
  // }
  return {
    appleActions: bindActionCreators({ pickApple, eatApple }, dispatch),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Apple);
